<script setup>
	import * as echarts from 'echarts'
	import {onMounted} from "vue";
	import {ref} from "vue";
	import {chartApi} from "@/api/chart.js";
	import {userApi} from "@/api/user.js";
	
	const chartRef = ref()
	let userCount;
	onMounted(()=> {
		const myChart = echarts.init(chartRef.value)
		userApi.selectCount().then(result=>{
			userCount=result.data
		})
		
		chartApi.selectNoticeCount().then(result => {
			let xName=[]
			let yiDu = []
			let weiDu=[]
			if (result.code == 0) {
				let list = result.data
				list.forEach(item => {
					yiDu.push(item.value);
					xName.push(item.name);
				})
				console.log('已读数量：'+yiDu)
				console.log(xName)
				yiDu.forEach(item=>{
					const flag=userCount-item
					weiDu.push(flag)
				})
				console.log(weiDu)
			}
			let rawData = []
			rawData.push(yiDu)
			rawData.push(weiDu)
			const totalData = [];
			for (let i = 0; i < rawData[0].length; ++i) {
				let sum = 0;
				for (let j = 0; j < rawData.length; ++j) {
					sum += rawData[j][i];
				}
				totalData.push(sum);
			}
			const grid = {
				left: 100,
				right: 100,
				top: 50,
				bottom: 50
			};
			const series = [
				'已读',
				'未读'
			].map((name, sid) => {
				return {
					name,
					type: 'bar',
					stack: 'total',
					barWidth: '60%',
					label: {
						show: true,
						formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
					},
					data: rawData[sid].map((d, did) =>
						totalData[did] <= 0 ? 0 : d / totalData[did]
					)
				};
			});
			var option;
			option = {
				title: {
					text: '公告确认情况图'
				},
				legend: {
					selectedMode: false
				},
				grid,
				yAxis: {
					type: 'value'
				},
				xAxis: {
					type: 'category',
					data: xName
				},
				series
			};
			myChart.setOption(option);
		})
		window.onresize = function () {
			myChart.resize();
		};
	})


</script>

<template>
	<div ref="chartRef" style="width: 100%;height: 100%"></div>
</template>

<style scoped>

</style>